import React, { useState } from 'react'
import { Select, Form, Button, Input } from 'antd'
import { useNavigate } from 'react-router-dom'
import './ChoiceLogin.css'
import { useSelector, useDispatch } from 'react-redux'
import axios from '../../util/axios.config'
import { addMenuList, addUserList, changeIsLogin } from '../../redux/user_reducer'

export default function ChoiceLogin() {
    const [code, setCode] = useState("")
    const dispatch = useDispatch()
    const navigate = useNavigate()
    // console.log(userObj)
    // 登录成功
    const onFinish = async (values) => {
        // console.log('Success:', values);
        // props.setIsLogin(true)
        dispatch(changeIsLogin(true))
        const res = await axios.post("http://47.116.116.42:3000/users/login", {
            phone: values.phone,
            key: values.key
        })

        if (res.data.ActionType === "OK") {
            // console.log(res.data.userList)
            dispatch(addUserList(res.data.userList[0]))
            if (values.key === 'user') {
                navigate('/home')
            } else if (values.key === "business") {
                navigate("/business/home")
            } else {
                navigate("/rider/order")
            }

        }else{
            alert("手机号或角色错误，请重新登录")
        }

    };
    // 登录失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // 切换角色
    const changeRole = (value, obj) => {
        console.log(value)
    }
    // 
    const changeCode = (e) => {
        setCode(e.target.value)
    }
    return (
        <div className='choiceBox'>
            <div className='choiceTop'>验证码登录</div>
            <div className='choiceForm'>
                <Form
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="手机号"
                        name="phone"
                        labelCol={{
                            style: {
                                color: "red"
                            }
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号',
                            },
                            {
                                pattern: /^1[345689]\d{9}$/,
                                message: '手机号错误'
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        initialValue="user"
                        label="角色"
                        name="key"
                        rules={[
                            {
                                required: true,
                            }
                        ]}
                    >
                        <Select onChange={changeRole}>
                            <Option value="user">用户</Option>
                            <Option value="business">商家</Option>
                            <Option value="rider">骑手</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="请输入验证码"
                        name="yzm"
                        value={code}
                        onChange={changeCode}
                        rules={
                            [
                                { required: true, message: "请输入验证码" }
                            ]
                        }
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        // wrapperCol={{
                        //     offset: 8,
                        //     span: 16,
                        // }}
                    >
                        <Button className='choiceloginCodeBtn' type="default" >发送验证码</Button>
                        <br></br>
                        <Button className='choiceloginBtn' type="primary" htmlType="submit" style={{ display: code ? 'block' : 'none' }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>

            <div>
                        
            </div>



        </div>
    )
}
